<template>
	<div>
		<jk-card class="margin-bottom-20" :show-header="true" :header-style="{ justifyContent: 'center', background: '#e8eaec' }">
			<span slot="header">参考模版</span>
			<el-form ref="formData" :model="formData" label-width="100px" :show-message="false">
				<div ref="box3">
					<div class="flex-between-center margin-bottom-4">
						<el-tag type="primary" effect="plain">
							<span class="el-icon-tickets item-gap"></span>
							<span>基本信息</span>
						</el-tag>
					</div>
					<jk-card class="margin-bottom-20">
						<el-row ref="box1">
							<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
								<el-form-item class="margin-bottom-10" label="日期">
									<span class="read-only-2">{{ formData.belongDate }}</span>
								</el-form-item>
							</el-col>
							<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
								<el-form-item class="margin-bottom-10" label="客户">
									<span class="read-only-2">{{ formData.customerName }}</span>
								</el-form-item>
							</el-col>
							<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
								<el-form-item class="margin-bottom-10" label="品种">
									<span class="read-only-2">{{ formData.productName }}</span>
								</el-form-item>
							</el-col>
							<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
								<el-form-item class="margin-bottom-10" label="支数">
									<span class="read-only-2">{{ formData.yarnCount }}</span>
								</el-form-item>
							</el-col>
							<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
								<el-form-item class="margin-bottom-10" label="报价">
									<span class="read-only-2">{{ formData.offerPrice }}</span>
								</el-form-item>
							</el-col>
							<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
								<el-form-item class="margin-bottom-10" label="有效期">
									<span class="read-only-2">{{ `${formData.effectiveStartDate}~${formData.effectiveEndDate}` }}</span>
								</el-form-item>
							</el-col>
							<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
								<el-form-item class="margin-bottom-10" label="报价员">
									<span class="read-only-2">{{ formData.empName }}</span>
								</el-form-item>
							</el-col>
						</el-row>
					</jk-card>
				</div>
				<div ref="box2">
					<div class="flex-between-center">
						<div>
							<el-tag type="primary" effect="plain" class="margin-bottom-4">
								<span class="el-icon-paperclip item-gap"></span>
								<span>一体丝</span>
							</el-tag>
						</div>
					</div>
					<jk-card class="margin-bottom-20">
						<el-row>
							<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
								<el-form-item class="margin-bottom-10" label="品种">
									<span class="read-only-2">{{ formData.coreProductName }}</span>
								</el-form-item>
							</el-col>
							<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
								<el-form-item class="margin-bottom-10" label="单价">
									<span class="read-only-2">{{ formData.coreContentPrice }}</span>
								</el-form-item>
							</el-col>
							<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
								<el-form-item class="margin-bottom-10" label="含芯量">
									<span class="read-only-2">{{ formData.coreContent }}</span>
								</el-form-item>
							</el-col>
							<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
								<el-form-item class="margin-bottom-10" label="金额">
									<span class="read-only-2">{{ formData.coreContentAmount }}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<core-option-list
							:page-type="pageType"
							:layout-config="layoutConfig"
							:show-template="showTemplate"
							:option-list="formData.onePieceSilkItem"
						></core-option-list>
					</jk-card>
				</div>
				<el-tag type="primary" effect="plain" class="margin-bottom-4">
					<span class="el-icon-notebook-2 item-gap"></span>
					<span>氨纶</span>
				</el-tag>
				<jk-card class="margin-bottom-20">
					<el-row>
						<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
							<el-form-item class="margin-bottom-10" label="品种">
								<span class="read-only-2">{{ formData.spandexProductName }}</span>
							</el-form-item>
						</el-col>
						<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
							<el-form-item class="margin-bottom-10" label="单价">
								<span class="read-only-2">{{ formData.spandexPrice }}</span>
							</el-form-item>
						</el-col>
						<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
							<el-form-item class="margin-bottom-10" label="数量" prop="spandexNumber">
								<span class="read-only-2">{{ formData.spandexNumber }}</span>
							</el-form-item>
						</el-col>
						<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
							<el-form-item class="margin-bottom-10" label="牵伸">
								<span class="read-only-2">{{ formData.spandexQs }}</span>
							</el-form-item>
						</el-col>
						<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
							<el-form-item class="margin-bottom-10" label="氨纶丝含量">
								<span class="read-only-2">{{ formData.spandexContent }}</span>
							</el-form-item>
						</el-col>
						<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
							<el-form-item class="margin-bottom-10" label="金额">
								<span class="read-only-2">{{ formData.spandexAmount }}</span>
							</el-form-item>
						</el-col>
					</el-row>
				</jk-card>
				<div class="flex-between-center">
					<el-tag type="primary" effect="plain" class="margin-bottom-4">
						<span class="el-icon-soccer item-gap"></span>
						<span>粗纱</span>
					</el-tag>
				</div>
				<el-row>
					<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
						<el-form-item class="margin-bottom-10" label="原料总成本" prop="coarseSandCost">
							<span class="read-only-2">{{ formData.coarseSandCost }}</span>
						</el-form-item>
					</el-col>
					<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
						<el-form-item class="margin-bottom-10" label="含粗" prop="coarseSandHc">
							<span class="read-only-2">{{ formData.coarseSandHc }}</span>
						</el-form-item>
					</el-col>
					<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
						<el-form-item class="margin-bottom-10" label="金额" prop="coarseSandAmount">
							<span class="read-only-2">{{ formData.coarseSandAmount }}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<coarse-sand-option-list
					:page-type="pageType"
					:layout-config="layoutConfig"
					:show-template="showTemplate"
					:option-list="formData.coarseSandItemList"
				></coarse-sand-option-list>
				<el-tag type="primary" effect="plain" class="margin-bottom-4 margin-top-20">
					<span class="el-icon-notebook-2 item-gap"></span>
					<span>附加费用</span>
				</el-tag>
				<jk-card class="">
					<el-row>
						<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
							<el-form-item class="margin-bottom-10" label="基本加工费">
								<span class="read-only-2">{{ formData.processingFee }}</span>
							</el-form-item>
						</el-col>
						<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
							<el-form-item class="margin-bottom-10" label="金额">
								<span class="read-only-2">{{ formData.surchargeAmount }}</span>
							</el-form-item>
						</el-col>
					</el-row>

					<surcharge-option-list
						:page-type="pageType"
						:layout-config="layoutConfig"
						:show-template="showTemplate"
						:option-list="formData.surchargeItem"
					></surcharge-option-list>
				</jk-card>
			</el-form>
		</jk-card>
	</div>
</template>
<script>
    import coarseSandOptionList from './coarse-sand-option-list';
    import coreOptionList from './core-option-list';
    import surchargeOptionList from './surcharge-option-list';
    export default {
        props: {
            formData: {
                type: Object,
                default() {
                    return {};
                }
            },
            layoutConfig: {
                type: Object,
                default() {
                    return {};
                }
            },
            showTemplate: {
                type: [Boolean, String],
                default: false
            }
        },
        components: {
            coarseSandOptionList,
            coreOptionList,
            surchargeOptionList
        },
        data() {
            return {
                pageType: 'detail',
                tableData: []
            };
        }
    };
</script>
